<template>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>{{ $t('Home') }}</el-breadcrumb-item>
      <el-breadcrumb-item>{{ $t('BlockChain') }}</el-breadcrumb-item>
      <el-breadcrumb-item>{{ $t('Explorer') }}</el-breadcrumb-item>
    </el-breadcrumb>
    <el-container class="explorer-page">
        <iframe
          :src="config.explorer"
          width="100%"
          height="100%"
          frameborder="0"
          allowfullscreen
        ></iframe>
    </el-container>
  </template>

<script lang="ts">
import { defineComponent } from 'vue'
import { config } from '@/config/config'

export default defineComponent({
  name: 'App',
  data() {
    return {
      config
    }
  }
})
</script>

<style>
.explorer-page {
    margin-top: 20px;
    height: 210vh;
}

.explorer-page iframe{
    overflow-y: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.explorer-page iframe::-webkit-scrollbar {
    display: none;
}
</style>